<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="pragma" content="no-cache"  />
   	<meta http-equiv="content-type" content="no-cache, must-revalidate" />
   	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
	<link rel="stylesheet" type="text/css" href="/css/style.css" />
	<title>汉斯顿集团</title>
	<style type="text/css">
	</style>
</head>
<body>
	<!-- 微信接口数据值调用 -->
	<input type="hidden" value="{{ $jssdkSignPackage['appId'] or 'default' }}" class="appId_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['timestamp'] or 'default' }}" class="timestamp_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['nonceStr'] or 'default' }}" class="nonceStr_val" />
	<input type="hidden" value="{{ $jssdkSignPackage['signature'] or 'default' }}" class="signature_val" />
	<!-- 隐藏标获取值 -->
	<input type="hidden" class="decStatus" value="{{ $state['decStatus'] or '离线' }}" /><!--设备状态值-->
	<input type="hidden" class="ppmNumVal" value="{{ $state['TDS2'] or 0 }}" /><!--ppm值-->
	<section class="page">
		<!-- head part start -->
		<section class="top">
			<section class="personalLogo" onclick="window.location.href='/device/{{ $type }}/user/info'"></section>
			<section class="statusName">离线</section>
			<section class="setUp"></section>
		</section>
		<section class="setUpBox">
			<a class="network" id="networkBtn">配置网络</a>
			<a class="deviceInfor" href="/device/{{ $type }}/info" >设备信息</a>
		</section>
		<!-- head part end -->
		<!-- content part start -->
		<section class="content">
			<section class="btnList waterStateBtn">
				<img class="addWitle" src="/img/addWater1.png" /><!-- 静止状态-->
				<img class="addGreen" src="/img/addWater2.png" /><!-- 制水状态-->
				<img class="lessWater" src="/img/lessWater.png" /><!-- 缺水状态-->
				<img class="fullWater" src="/img/addWater2.png" /><!-- 水满状态-->
				<img class="dormancy" src="/img/addWaterReadiness.png" /><!-- 休眠状态-->
                <p class="addText">制水</p>
			</section>
            <section class="btnList washBtn">
				<img class="washWitle" src="/img/washLogo1.png" /><!-- 静止冲洗状态-->
				<img class="washGreen" src="/img/washLogo2.png" /><!-- 冲洗按钮状态-->
				<img class="powerOffState" src="/img/washReadiness.png" /><!-- 关机状态-->
                <p class="washText">冲洗</p>
			</section>
            <section class="btnList filtersBtn" onclick="window.location='/device/{{ $type }}/filters'">
				<img class="filterBtn" src="/img/filterLog1.png" /><!-- 滤芯按钮-->
				<img class="dormancy" src="/img/filterReadiness.png" /><!-- 休眠状态-->
                <p class="filterText">滤芯</p>
			</section>
            <section class="btnList readinessBtn">
				<img class="serviceWitle" src="/img/serviceLogo1.png" /><!-- 检修静止状态-->
				<img class="serviceYellow" src="/img/serviceLogo2.png" /><!-- 检修状态-->
				<img class="dormancy" src="/img/serviceReadiness.png" /><!-- 休眠状态-->
                <p class="serviceText">检修</p>
			</section>
            <a class="btnList powerOffBtn">
                @if(isset($state['decStatus']) && $state['decStatus'] != 7)
				<p class="powerOffText">关机</p>
				@else
				<p class="powerOffText">开机</p>
				@endif
			</a>
			<section class="ppmBox">
				<p class="ppmUnit"></span>ppm</p>
				<section class="numBox" id="numBox">
					<img class="Num03" src="/img/noneBg.png" />
					<img class="Num02" src="/img/noneBg.png" />
					<img class="Num01" src="/img/noneBg.png" />
				</section>
			</section>
		</section>
		<!-- content part end -->
	</section>
	<!-- 提交信息服务器反馈提示信息-->
	<section class="hint_bg">
		<section class="hint_box">
			<p class="hint_text" style="margin-top: 2.5rem;"></p>
			<section class="hint_btn" style="margin: 2rem auto;">确定</section>
		</section>
	</section>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/public.js"></script>
	<script src="/js/state.js"></script>
	<script src="/js/socket.io.js"></script>
	<script src="/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
	window.onload=function(){
		//配网
	    wx.config({
	        beta:true,
	        debug:false,
	        appId:$('.appId_val').val(),
	        timestamp:$('.timestamp_val').val(),
	        nonceStr:$('.nonceStr_val').val(),
	        signature:$('.signature_val').val(),
	        jsApiList:['configWXDeviceWiFi']
	    });
		//右上角按钮
	    $(".setUp").click(function(event){
	        event.stopPropagation();
	        $(".setUpBox").show();
	        $("#networkBtn").unbind('click').click(function(){
	        	wx.ready(function(){
					wx.invoke('configWXDeviceWiFi',{
					},function(res){
						switch (res.err_msg){
							case 'configWXDeviceWiFi:ok':
								hint('配置成功');
								break;
							case 'configWXDeviceWiFi:fail':
								hint('超时');
								break;
							case 'configWXDeviceWiFi:cancel':
								hint('用户取消');
								break;
							default:
								hint("res.err_msg:\n" + res.err_msg + "\nres.desc:" + res.desc);
						}
					});
				});
	            $(".setUpBox").hide();
	        })
	        $(".setUpBox .deviceInfor").unbind('click').click(function(){
	            $(".setUpBox").hide();
	        })
	        $("body").unbind('click').click(function(){
	            $(".setUpBox").hide();
	        });
	    }) 
		$(".page").height($(window).height());
	    //刷新页面显示当前状态
		var decStatus=$(".decStatus").val();
	    if(decStatus==1){//制水
	    	addWater();
	    }else if(decStatus==2){//缺水
	    	lessWater();
	    }else if(decStatus==3){//水满
	    	fillWater();
	    }else if(decStatus==4){//检修
	    	service();
	    }else if(decStatus==5){//冲洗
	    	wash();
	    }else if(decStatus==7){//关机
	    	shutDown();
	    }else if(decStatus==9){//休眠
	    	dormancy();
	    }
	    //刷新页面显示当前TDS值
	    var ppmVal=$(".ppmNumVal").val();
    	var numString=ppmVal.toString();
    	var imgArr=numBox.getElementsByTagName("img");
    	if($(".decStatus").val()==7){
    		imgArr[0].src="/img/noneBg.png";
    		imgArr[1].src="/img/noneBg.png";
    		imgArr[2].src="/img/noneBg.png";
    	}else{
	    	if(numString.length==1){
	    		imgArr[0].src="/img/noneBg.png";
	    		imgArr[1].src="/img/noneBg.png";
	    		imgArr[2].src="/img/"+numString+".png";
	    	}else if(numString.length==2){
	    		imgArr[0].src="/img/noneBg.png";
	    		imgArr[1].src="/img/"+numString.charAt(0)+".png";
	    		imgArr[2].src="/img/"+numString.charAt(1)+".png";
	    	}else{
	    		imgArr[0].src="/img/"+numString.charAt(0)+".png";
	    		imgArr[1].src="/img/"+numString.charAt(1)+".png";
	    		imgArr[2].src="/img/"+numString.charAt(2)+".png";
	    	}
    	}
	    //开关机按钮
	    $(".powerOffBtn").click(function(){
	    	//若是休眠状态，则唤醒
	    	if($(".statusName").html()=="休眠中"){
	    		$.ajax({
	    			url:"/api/device/{{ $type }}/control",
	    			type:"post",
	    			dataType:"json",
	    			data:{
	    				command:"awaken"
	    			},
	    			success:function(data){
	    				if(data.status.errCode==0){
	    				}else if(data.status.errCode == 20005){//没有绑定水机
		                    window.location.href = "/index";
		                }else{
	    					hint(data.status.message);
	    				}
		    		}
	    		});
	    	}else{
	    		var val = $(".powerOffText").html();
		        if(val=="关机"){
		            var command ="power_off";
		        }else{
		            var command = "power_on";
		        }
	            $.ajax({
	                url:"/api/device/{{ $type }}/control",
	                type:"post",
	                dataType:"json",
	                data:{command:command},
	                success:function(data){
	                    if(data.status.errCode == 0){

	                    }else if(data.status.errCode == 20005){//没有绑定水机
		                    window.location.href = "/index";
		                }else if(data.status.errCode==20002){//设备离线
	                        hint(data.status.message);
	                        offLine();
	                    }else{
	                         hint(data.status.message);
	                    }
	                }
	            });
	    	} 
	    });
	    //点击冲洗按钮
	    $('.washBtn').click(function(event){
	    	//若是休眠状态，则唤醒
	    	if($(".statusName").html()=="休眠中"){
	    		$.ajax({
	    			url:"/api/device/{{ $type }}/control",
	    			type:"post",
	    			dataType:"json",
	    			data:{
	    				command:"awaken"
	    			},
	    			success:function(data){
	    				if(data.status.errCode==0){
	    				}else if(data.status.errCode == 20005){//没有绑定水机
	                        window.location.href = "/index";
	                    }else{
	    					hint(data.status.message);
	    				}
	    			}
	    		});
	    	}else if($(".addText").html()=="缺水"||$(".powerOffText").html()=="开机"||$(".statusName").html()=="检修中")
	        {
	            event.preventDefault();
	        }else
	        {   
	            if($(".washText").html() == "冲洗"){
	                var command = "wash";
	            }else{
	                var command = "wash_cancel"; 
	            }
	            $.ajax({
	                url:"/api/device/{{ $type }}/control",
	                type:"post",
	                dataType:"json",
	                data:{command:command},
	                success:function(data){
	                    if(data.status['errCode'] == 0){
	                    }else if(data.status.errCode == 20005){//没有绑定水机
	                        window.location.href = "/index";
	                    }else if(data.status.errCode==20002){//设备离线
	                            offLine();
	                            hint(data.status.message);
	                    }else{
	                        hint(data.status.message);
	                    }
	                }
	            });
	        }
	    });
	}
	//异步传输数据
    var i=0;
    var socket = io('{{ $host }}:6001');
    socket.on('state-{{ $state['deviceCode'] }}:App\\Events\\DeviceStateInfoUpdate', function(message){
    	// console.log(message);
        switch (message.deviceData['decStatus']){
			case 1://制水1
				addWater();
				break;
	    	case 2://缺水
	    		lessWater();
	    		break;
	    	case 3://水满
	    		fillWater();
	    		break;
	    	case 4://检修
	    		service();
	    		break;
	    	case 5://冲洗
	    		wash();
	    		break;
	    	case 7://关机
	    		shutDown();
	    		break;
	    	case 9://休眠
	    		dormancy();
	    		break;
	    	default:
	    		break;
    	}
    	var ppmVal=message.deviceData['TDS2'];
	    var numString=ppmVal.toString();
	    var numBox=document.getElementById('numBox');
	    var imgArr=numBox.getElementsByTagName("img");
    	if(message.deviceData['decStatus']==7){
	    	imgArr[0].src="/img/noneBg.png";
	    	imgArr[1].src="/img/noneBg.png";
	    	imgArr[2].src="/img/noneBg.png";
	    }else{
		    if(numString.length==1){
		    	imgArr[0].src="/img/noneBg.png";
		    	imgArr[1].src="/img/noneBg.png";
		    	imgArr[2].src="/img/"+numString+".png";
		    }else if(numString.length==2){
		    	imgArr[0].src="/img/noneBg.png";
		    	imgArr[1].src="/img/"+numString.charAt(0)+".png";
		    	imgArr[2].src="/img/"+numString.charAt(1)+".png";
		    }else{
		    	imgArr[0].src="/img/"+numString.charAt(0)+".png";
		    	imgArr[1].src="/img/"+numString.charAt(1)+".png";
		    	imgArr[2].src="/img/"+numString.charAt(2)+".png";
		    }
	    }
    	i=0;
    });
    //隔40秒判定设备是否接受数据，若无，设置为离线
    setInterval(function(){
        i++;
        if(i == 40){
            offLine();    
        }
    }, 1000);

	</script>
</body>
</html>